<!doctype html>
<html xmlns:fb="http://ogp.me/ns/fb#">
  Esto es main.html
  <form action = "http://www.google.com/search">
    <input name = "q">
    <input type = "submit">
  </form>

  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Lovers Matching - MainPage</title>
    <link rel="stylesheet" type="text/css" href="../stylesheets/jquery-ui-1.8.22.custom.css">
  </head>
  <body>

    <div id="fb-root"></div>

    <h1>Welcome to Lovers Matching !!</h1>

    <br>
    
    <div id=̈́"login-button"> 
      <fb:login-button>
      </fb:login-button>
    </div>
    
    <br>
    
    People waiting in the group:

    <div id="people"></div>

    <div id="group" hidden="true"></div>

    <div id="status"></div> 

    <script src="/js/all.js"></script>
    <script src="/js/jquery-1.7.2.js"></script>
    <script src="/js/jquery-ui-1.8.22.custom.min.js"></script>
    <script src="/js/common.functions.js"></script>
    
    <script>

      initialize();

      FB.Event.subscribe('auth.login', function () {
        window.location = "http://loversmatching.appspot.com";
      }); 

      var doLogin = function(){

        FB.getLoginStatus(function(response) {

          if (response.status == 'connected') {
            //si esta conectado: poner el fb_uid en el form, hacer un GET para que accion hacer y mostrar contenido    
            console.debug('connected');

            FB.api('/me', function(res) { 
              
              $.ajax({
                type: "GET",
                url: "addGroup",
                data: "fb_uid=" + res.id,
                success: function(msg){
                  $('div#group')[0].innerHTML = msg;
                  $("#datepicker").datepicker();

                  jQuery.each($('input#fb_uid'), function(i){
                    $('input#fb_uid')[i].value = res.id; 
                  });
                }
              });
            });

            $('div#group').show();

          } else if (response.status == 'not_authorized') {
            //si no esta autorizado, muestra eso pero todavia nunca paso  
            console.debug('not_authorized');
            $('div#status')[0].innerHTML = 'Autorize this api !';

          } else {
            //si no esta conectado mostramos solo ese mensaje
            console.debug('not connected');
            $('div#status')[0].innerHTML = 'You are not connected to Facebook!';
          }

          return;
        });  
      };

      var doGroupPoll = function(){
        $.get('listAjax', function(data) {
          
          console.debug('updating the people');
          $('div#people')[0].innerHTML = data;

          setTimeout(doGroupPoll,5000);
        });
      };

      doGroupPoll();
      doLogin();

    </script>
  </body>
</html>
